<template>
  <view class="containter">
    <!-- 客户信息 -->
    <view class="userInfo">
      <view class="userInfo-tp">
        <view class="title">
          客户信息
        </view>
        <view class="edit">
          编辑
        </view>
      </view>
      <view class="userInfo-warp">
        <view class="userInfo-warp-item">
          <view class="label">客户姓名：</view>
          <view class="userInfo-warp-item-fr">
            <text class="txt">{{orderInfo.connect_name}}</text>
          </view>
        </view>
        <view class="userInfo-warp-item">
          <view class="label">联系方式：</view>
          <view class="userInfo-warp-item-fr" style="display: flex;align-items: center;">
            <text class="txt">{{orderInfo.connect_information}}</text>
            <view class="callPhone" @click="callPhone(orderInfo.connect_information)">拨号</view>
            <view class="copyTxt" @click="copyText(orderInfo.connect_information)">复制</view>
          </view>
        </view>
        <view class="userInfo-warp-item">
          <view class="label">联系类型：</view>
          <view class="userInfo-warp-item-fr">
            <text class="txt">{{connectType[orderInfo.connect_type]}}</text>
          </view>
        </view>
        <!--        <view class="userInfo-warp-item">
          <view class="label">客户级别：</view>
          <view class="userInfo-warp-item-fr">
            <text class="txt">A（准客户）</text>
          </view>
        </view> -->
        <!--        <view class="userInfo-warp-item">
          <view class="label">客户项目：</view>
          <view class="userInfo-warp-item-fr">
            <text class="txt">商城项目</text>
          </view>
        </view> -->
        <view class="userInfo-warp-item">
          <view class="label">客户来源：</view>
          <view class="userInfo-warp-item-fr">
            <text class="txt">{{sourceType[orderInfo.source_type]}}</text>
          </view>
        </view>
      </view>
      <view class="userInfo-foot">
        <view class="userInfo-foot-item">
          <view class="label">备注：</view>
          <view class="content">
            <text class="txt">
              {{orderInfo.source_remark?orderInfo.source_remark:'无'}}
            </text>
          </view>
        </view>
        <view class="userInfo-foot-item" style="margin-top: 28rpx;">
          <view class="label">图片：</view>
          <view class="content">
            <image class="img" @click="clickImg(item)" :src="item" mode="" v-for="(item, index) in orderInfo.source_images" :key="index">
            </image>
          </view>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 22rpx;background-color: #F7F8FA;"></view>
    <!-- 活动记录 -->
    <view class="activityInfo">
      <view class="activityInfo-title">
        活动记录
      </view>
      <view class="activityInfo-warp">
        <uv-steps current="0" direction="column">
          <uv-steps-item v-for="(item, index) in orderInfo.follow" :key="index">
            <template v-slot:icon>
              <image class="stepImg" src="../../static/images/step.png" mode=""></image>
            </template>
            <template v-slot:title>
              <view class="flex align-center">
				  <text class="stepName">{{item.username}}</text>
				  <text class="stepTime">{{item.created_at}}</text>
			  </view>
            </template>
            <template v-slot:desc>
              <view class="stepContent">{{item.content}}</view>
              <view class="stepImgs">
                <image class="img" @click="clickImg(item2)" :src="item2" mode="" v-for="(item2, index2) in item.images"
                  :key="index2">
                </image>
              </view>
            </template>
          </uv-steps-item>
        </uv-steps>
      </view>
    </view>
    <view style="width: 100%;height: 138rpx;"></view>
    <view class="footer">
      <view class="btn" @click="jiedan" v-if="orderInfo.is_follow == 0">
        确认接单
      </view>
      <view class="btn" v-if="orderInfo.is_follow == 1" @click="toRecordPage">
        填写跟进记录
      </view>
    </view>
    <uv-modal ref="modal" title="确认接单吗？" :showCancelButton="true" @confirm="confirm"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        orderInfo: {
          source_remark: ""
        },
        connectType: {
          1: "电话",
          2: "微信",
          3: "QQ",
          4: "其他"
        },
        sourceType: {
          1: "淘宝",
          2: "百度",
          3: "自拓",
          4: "其他"
        }
      }
    },
    onLoad(option) {
      this.getDetail(option.id);
    },
    methods: {
      clickImg(url) {
        console.log("预览图片路径", url);
        // 预览图片
        uni.previewImage({
          urls: [url],
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
             console.log(data);
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
      },
      copyText(text) {
        uni.setClipboardData({
          data: text,
          success: function() {
            uni.showToast({
              title: "复制成功",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
          }
        });
      },
      jiedan() {
        this.$refs.modal.open();
      },
      confirm() {
        console.log('点击确认按钮');
        reqApi.takeOrder({
          id: this.orderInfo.id
        }).then(res => {
          uni.showToast({
            title: "接单成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          let _this = this;
            uni.requestSubscribeMessage({
              tmplIds: ['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'],
              success(res) {
                console.log("是否授权", res);
                if (res['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'] == "accept") { // 用户点击确定后
                  // uni.showToast({
                  //   title: "订阅成功",
                  //   icon: 'none',
                  //   mask: true,
                  //   duration: 1000,
                  // })
                  _this.getDetail(_this.orderInfo.id);
                }
                if (res['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'] == "reject") { // 用户点击确定后
                  uni.showToast({
                    title: "拒绝订阅消息",
                    icon: 'none',
                    mask: true,
                    duration: 1000,
                  })
                }
              }
            })

        })
      },
      callPhone(phone) {
        uni.makePhoneCall({
          phoneNumber: phone, // 电话号码
          success: function() {
            console.log('拨号成功');
          },
          fail: function() {
            console.log('拨号失败');
          }
        });
      },
      toRecordPage() {
        uni.navigateTo({
          url: `/pages/order/addRecord?id=${this.orderInfo.id}`
        })
      },
      getDetail(id) {
        reqApi.orderDetail({
          id
        }).then(res => {
          console.log("订单详情", res);
          this.orderInfo = res.data;
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .stepImgs {
    display: flex;
    flex-wrap: wrap;

    .img {
      width: 118rpx;
      height: 118rpx;
      border-radius: 20rpx;
      margin-right: 15rpx;
      margin-bottom: 20rpx;
    }
  }

  .stepImg {
    width: 80rpx;
    height: 80rpx;
  }

  .stepName {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #323233;
  }

  .stepTime {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #969799;
	margin-left: 15rpx;
  }

  .stepContent {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #323233;
	  margin: 10rpx 0;
  }

  .containter {
    width: 100vw;
    height: 100vh;
    background: #fff;
    overflow-y: scroll;

    .activityInfo {
      background: #fff;
      padding: 50rpx 28rpx;
      box-sizing: border-box;

      .activityInfo-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #323233;
      }

      .activityInfo-warp {
        padding: 0 15rpx;
        box-sizing: border-box;
        margin-top: 50rpx;
      }
    }

    .userInfo {
      padding: 48rpx 28rpx;
      box-sizing: border-box;
      background: #fff;

      .userInfo-tp {
        display: flex;
        justify-content: space-between;
        margin-bottom: 50rpx;

        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #323233;
        }

        .edit {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #1071E7;
        }
      }

      .userInfo-warp {
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #eee;

        .userInfo-warp-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .label {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #969799;
          }

          .userInfo-warp-item-fr {
            flex: 1;
            display: flex;
            justify-content: flex-end;

            .txt {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #323233;
            }

            .copyTxt {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #1071E7;
            }

            .callPhone {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #1071E7;
               margin: 0 30rpx;
            }
          }
        }
      }

      .userInfo-foot {
        margin-top: 22rpx;

        .userInfo-foot-item {
          display: flex;
          justify-content: space-between;

          .label {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #323233;
          }

          .content {
            flex: 1;
            display: flex;
            flex-wrap: wrap;

            .txt {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #969799;
            }

            .img {
              width: 118rpx;
              height: 118rpx;
              border-radius: 20rpx;
              margin-right: 15rpx;
              margin-bottom: 20rpx;
            }
          }
        }
      }
    }
  }
</style>